<template>
  <div id="dataRender">
    <div class="md:flex md:h-1/5 md:mb-5">
      <BasicCard class="md:w-1/5 !md:mx-5" title="租户数" color="#FFCCE6" icon="clarity:assign-user-line"></BasicCard>
      <BasicCard class="md:w-1/5 !md:mr-5" title="已订阅应用数" color="#CC66CC" icon="bi:app-indicator"></BasicCard>
      <BasicCard class="md:w-1/5 !md:mr-5" title="命名空间数" color="#99FFCC" icon="clarity:namespace-line"></BasicCard>
      <BasicCard
        class="md:w-1/5 !md:mr-5"
        title="数据库数"
        color="#8FFFFF"
        icon="clarity:data-cluster-outline-badged"
      ></BasicCard>
      <BasicCard class="md:w-1/5 !md:mr-5" title="工作负载数" color="#66B3FF" icon="clarity:deploy-line"></BasicCard>
    </div>
    <div class="md:flex md:h-1/5 md:mb-5">
      <BasicCard class="md:w-1/5 !md:mx-5" title="应用数" color="#0000FF" icon="bi:app"></BasicCard>
      <BasicCard class="md:w-1/5 !md:mr-5" title="服务数" color="#FF66FF" icon="clarity:network-globe-line"></BasicCard>
      <BasicCard class="md:w-1/5 !md:mr-5" title="ECS数" color="#8F8FFF" icon="clarity:rack-server-line"></BasicCard>
      <BasicCard class="md:w-1/5 !md:mr-5" title="用户总数" color="#4747A7" icon="clarity:users-line"></BasicCard>
      <BasicCard
        class="md:w-1/5 !md:mr-5"
        title="组织总数"
        color="#C640EC"
        icon="clarity:organization-line"
      ></BasicCard>
    </div>
  </div>
</template>

<script lang="ts">
import BasicCard from '/@/views/maintenance-center/resource-monitor/for-platform/components/basicCard.vue';

export default {
  components: { BasicCard },
  props: {
    result: {
      tenants: String,
      subscribedApps: String,
      namespaces: String,
      databases: String,
      deployments: String,
      apps: String,
      services: String,
      ecs: String,
      users: String,
      orgCounts: String,
    },
  },
  setup() {
    return {};
  },
};
</script>
